<template>
  <div class="dialog-container">
    <el-form class="ml50" :model="formdata" label-width="90px" label-position="left">
      <el-form-item label="角色类型" prop="type">
        <el-radio-group v-model="formdata.role_type">
          <el-radio :label="1">超管</el-radio>
          <el-radio :label="2">社区</el-radio>
          <el-radio :label="3">部门</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formdata.role_name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formdata.about" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入说明" />
      </el-form-item>
      <el-form-item label="授权菜单">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          class="permission-tree"
          :check-strictly="checkStrictly"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="popup_save">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Edit',
  props: { // 接受父组件传过来参数值的子组件参数
    detailId: {
      type: Number
    }
  },
  data() {
    return {
      formdata: {},
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      checkStrictly: true, //	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
      halfCheckedKeys: [],
      checkedKeys: [],
      allChecked: []
    }
  },
  computed: {
    // roles() {
    //   return this.$store.getters.roles
    // },
    // switchRoles: {
    //   get() {
    //     return this.roles[0]
    //   },
    //   set(val) {
    //     this.$store.dispatch('user/changeRoles', val).then(() => {
    //       this.$emit('change')
    //     })
    //   }
    // }
  },
  created() {
    // console.log('created')
    this.load_data()
  },
  methods: {
    //* *****************  通用业务  **************************
    load_data() {
      this.$api.auth.auth_menuroleview({
        id: this.detailId
      }).then(response => {
        this.formdata = response.data
        this.deal_data()
      })
    },
    deal_data() {
      this.$api.auth.ztree_menu({
        role_id: this.formdata.id
      }).then(response => {
        /** *** 数据处理 *****/
        this.treeData = this.deal_tree(response.data)
        /** *** 已选中的回显 *****/
        this.setCheckedKeys(this.treeData)
      })
    },
    /** *** 已选中的回显 *****/
    setCheckedKeys(data) {
      var arr = []
      data.forEach(function(item) {
        // console.log('item', item)
        if (item.checked == 'true') {
          arr.push(item.id)
          if (item.children) {
            for (var i = 0; i < item.children.length; i++) {
              if (item.children[i].checked == 'true') {
                arr.push(item.children[i].id)
              }
            }
          }
        }
      })
      // console.log('arr', arr)
      this.$refs.tree.setCheckedKeys(arr)
    },
    /** *** 数据处理 *****/
    deal_tree(data) {
      // 删除 所有 children,以防止多次调用
      data.forEach(function(item) {
        delete item.children
      })

      // 将数据存储为 以 id 为 KEY 的 map 索引数据列
      var map = {}
      data.forEach(function(item) {
        map[item.id] = item
      })
      // console.log('map', map)
      var val = []
      data.forEach(function(item) {
        // console.log('item', item)
        // 以当前遍历项，的pid,去map对象中找到索引的id
        item.label = item.name
        var parent = map[item.pId]
        // console.log('parent', parent)
        // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          // 如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级

          val.push(item)
        }
      })
      // console.log('val', val)
      return val
    },
    //* *****************  基础业务  **************************
    dialogClose() {
      this.$emit('dialogClose', false)
    },
    popup_save() {
      // 获取已选中的id
      this.halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      this.checkedKeys = this.$refs.tree.getCheckedKeys()
      this.allChecked = this.halfCheckedKeys.concat(this.checkedKeys)
      // console.log(1, this.halfCheckedKeys)
      // console.log(2, this.checkedKeys)
      console.log('allChecked', this.allChecked)
      console.log('this.formdata', this.formdata)
      this.formdata.menu_ids = this.allChecked
      // this.$api.auth.auth_menuroleedit(this.formdata).then(response => {
      //   this.$notify({
      //     title: '成功',
      //     message: '保存成功',
      //     type: 'success',
      //     duration: 2000
      //   })
      //   this.dialogClose()
      // })
    }
  }
}
</script>
